﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-us">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <!--
    Copyright 2008 Google Inc.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    -->
    <title>Monster Milktruck!</title>
    <link rel=stylesheet href='milktruck.css' type='text/css' />
    <script src="../../Cesium/Cesium.js"></script>
    <script type="text/javascript" src="shadow.js"></script>
    <script type="text/javascript" src="milktruck.js"></script>
</head>
<body onkeydown="return keyDown(event);" onkeyup="return keyUp(event);">
    <div id="cesiumContainer"></div>
    <div id="loadingIndicator" class="loadingIndicator"></div>
    <div class="title">
        <i>MONSTER MILKTRUCK!</i>
        <div class="ported">
            Ported to <a target="_blank" href="http://cesiumjs.org/for-google-earth-developers.html"><img src="" alt="Cesium" /></a><br />
            <a target="_blank" href="http://earth-api-samples.googlecode.com/svn/trunk/demos/milktruck/index.html">(View original Google Earth version)</a>
        </div>
        <div class="ribbon">
            <a target="_blank" href="https://github.com/AnalyticalGraphicsInc/cesium-google-earth-examples"><img src="greenfork.png" alt="Fork me on GitHub" width="149" height="149" /></a>
        </div>
    </div>

    <script>
        var currentTime = new Cesium.JulianDate(2457064, 13662.710572260446);
        var viewer = new Cesium.Viewer('cesiumContainer', {
            animation: false,
            geocoder: false,
            homeButton: false,
            sceneModePicker: false,
            timeline: false,
            navigationHelpButton: false,
            navigationInstructionsInitiallyVisible: false,
            fullscreenButton: true,
            baseLayerPicker: false,
            scene3DOnly: true,
            clock : new Cesium.Clock({ currentTime : currentTime })
        });
        viewer.scene.terrainProvider = new Cesium.CesiumTerrainProvider({
            url : '//assets.agi.com/stk-terrain/world'
        });
        viewer.scene.globe.depthTestAgainstTerrain = true;
        viewer.scene.screenSpaceCameraController.enableInputs = false;
        viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0.0;

        var truck = new Truck(viewer);

        var bingKey = Cesium.BingMapsApi.getKey();

        var loadingIndicator = document.getElementById('loadingIndicator');

        function geocode(element) {
            var query = element.value;

            if (/^\s*$/.test(query)) {
                return;
            }

            var promise = Cesium.loadJsonp('//dev.virtualearth.net/REST/v1/Locations', {
                parameters: {
                    query: query,
                    key: bingKey

                },
                callbackParameterName: 'jsonp'
            });

            var geocodeInProgress = Cesium.when(promise, function (result) {
                if (geocodeInProgress.cancel) {
                    return;
                }

                if (result.resourceSets.length === 0) {
                    element.value = query + ' (not found)';
                    return;
                }

                var resourceSet = result.resourceSets[0];
                if (resourceSet.resources.length === 0) {
                    element.value = query + ' (not found)';
                    return;
                }

                var resource = resourceSet.resources[0];

                element.value = resource.name;
                var bbox = resource.bbox;
                var south = bbox[0];
                var west = bbox[1];
                var north = bbox[2];
                var east = bbox[3];
                var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);

                var camera = viewer.camera;
                var position = camera.getRectangleCameraCoordinates(rectangle);
                if (!Cesium.defined(position)) {
                    return;
                }

                var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(position);
                truck.teleportTo(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude));
            });
        }

        function submitLocation() {
            geocode(document.getElementById('address'));
        }

        function truckTick() {
            truck.tick();
        }

        function findHeight(lon, lat, level, height) {
            var position = [Cesium.Cartographic.fromDegrees(lon, lat)];
            var positionPromise = Cesium.sampleTerrain(viewer.scene.terrainProvider, level, position);

            Cesium.when(positionPromise, function () {
                if (Cesium.defined(position[0].height)) {
                    viewer.scene.camera.setView({
                        destination: Cesium.Cartesian3.fromDegrees(lon, lat, height + 1)
                    });
                    findHeight(lon, lat, level + 1, position[0].height);
                } else {
                    viewer.scene.camera.setView({
                        destination: Cesium.Cartesian3.fromDegrees(lon, lat, height + 1)
                    });

                    Cesium.when(truck.model.readyPromise).then(function (model) {
                        var removeEvent = viewer.scene.postRender.addEventListener(function () {
                            var cart = Cesium.Cartographic.fromDegrees(lon, lat);
                            var pickedHeight = viewer.scene.globe.getHeight(cart);
                            if (Cesium.defined(pickedHeight) && Math.abs(pickedHeight - height) < 5.0) {
                                removeEvent();
                                loadingIndicator.style.display = 'none';
                                truck.teleportTo(lon, lat, height);
                                truck.lastMillis = (new Date()).getTime();
                                viewer.scene.postRender.addEventListener(truckTick);
                                viewer.scene.debugCommandFilter = undefined;
                            }
                        });
                    });
                }
            });
        }

        function teleportTo(lon, lat) {
            viewer.scene.postRender.removeEventListener(truckTick);
            viewer.scene.debugCommandFilter = function () {
                return false;
            };

            loadingIndicator.style.display = 'block';

            var height = 10000.0;
            viewer.scene.camera.setView({
                positionCartographic: Cesium.Cartographic.fromDegrees(lon, lat, height)
            });
            findHeight(lon, lat, 9, height);
        }

        teleportTo(-123.0744619, 44.0503706);
    </script>

    <table class="bottomControls">
        <tr>
            <td>
                To drive: use the buttons, or keyboard arrows (with focus on page).

                <div>
                    <form name='searchform' id='searchform' action='javascript:submitLocation();void(0);'>
                        <input type="text" size="58" id='address' placeholder='(enter a location to go there)' />
                        <input type="submit" class="cesium-button" value='Teleport!'>
                    </form>

                    Presets:
                    <input type="button" class="cesium-button" value="Whistler" onclick="teleportTo(-122.855824,50.085734);">
                    <input type="button" class="cesium-button" value="Grand Canyon" onclick="teleportTo(-112.7422594,36.3079874);">
                    <input type="button" class="cesium-button" value="Meteor Crater" onclick="teleportTo(-111.02255803482507,35.03285647546941);">
                    <input type="button" class="cesium-button" value="El Capitan" onclick="teleportTo(-119.63751256720771,37.733875309213396);">
                </div>


            </td>
            <td>
                <table>
                    <tr>
                        <td></td>
                        <td><input type=button id="buttonGas" class="cesium-button medw" onmousedown="gasButtonDown=true;" onmouseup="gasButtonDown=false;" value="gas"></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><input type=button id="buttonLeft" class="cesium-button medw" onmousedown="leftButtonDown=true;" onmouseup="leftButtonDown=false;" value="left"></td>
                        <td></td>
                        <td><input type=button id="buttonRight" class="cesium-button medw" onmousedown="rightButtonDown=true;" onmouseup="rightButtonDown=false;" value="right"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type=button id="buttonReverse" class="cesium-button medw" onmousedown="reverseButtonDown=true;" onmouseup="reverseButtonDown=false;" value="reverse"></td>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

</body>
</html>
